<template>
  <div id="app">
    <h2>Unicode 形式引入阿里图标</h2>
    <i class="iconfont" v-html="'&#xe617;'"></i>
    <i class="iconfont">&#xe696;</i>
    <i class="iconfont">&#xe616;</i>
    <i class="iconfont">&#xe60f;</i>

    <h2>Font class 形式引入阿里图标</h2>
    <i class="icon iconfont icon-nongyekeji"></i>
    <br><br>

    <h2>Symbol 形式引入阿里图标</h2>
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-a-01_zihangche" /> 
    </svg>
    <br><br>

    <h2>svg-sprite-loader加载.svg文件的自定义引入方式</h2>
    <svg-icon icon-class="bianji"></svg-icon>

    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
     
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.icon {
    width: 1em; height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}
</style>

</style>
